<!DOCTYPE HTML>
<html>

<head>
	<title>proton.js-behaviour-RandomDirft1</title>
	<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<meta charset="utf-8">
	<style type="text/css">
		body {
			font-family: Monospace;
			background-color: #f0f0f0;
			margin: 0px;
			overflow: hidden;
		}

		#testCanvas {
			background: #000000;
		}
	</style>
</head>

<body>
	<canvas id="testCanvas"></canvas>
	<script src="../../lib/requestAnimationFrame.min.js"></script>
    <script src="../../lib/stats.min.js"></script>
	<script src="//localhost:3001/build/proton.js"></script>
	<script>
		var canvas;
		var context;
		var proton;
		var renderer;
		var emitter;
		var stats;

		main();
		function main() {
			initCanvas();
			addStats();
			createProton();
			tick();
		}

		function initCanvas() {
			canvas = document.getElementById("testCanvas");
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;
			context = canvas.getContext('2d');
			canvas.addEventListener('mousedown', mousedownHandler, false);
		}

		function addStats() {
			stats = new Stats();
			stats.setMode(2);
			stats.domElement.style.position = 'absolute';
			stats.domElement.style.left = '0px';
			stats.domElement.style.top = '0px';
			document.body.appendChild(stats.domElement);
		}

		function createProton() {
			proton = new Proton;
			emitter = new Proton.Emitter();
			emitter.rate = new Proton.Rate(new Proton.Span(3, 6), new Proton.Span(.15, .3));

			emitter.addInitialize(new Proton.Mass(1));
			emitter.addInitialize(new Proton.Radius(10, 20));
			emitter.addInitialize(new Proton.Life(1, 3));
			emitter.addInitialize(new Proton.V(new Proton.Span(1, 3), new Proton.Span(-20, 20), 'polar'));

			emitter.addBehaviour(new Proton.RandomDrift(30, 30, .05));
			emitter.addBehaviour(new Proton.Scale(1, 0));
			emitter.addBehaviour(new Proton.Color('#ffffff', '#ff0000'));

			emitter.p.x = canvas.width / 2;
			emitter.p.y = canvas.height / 2;
			emitter.emit(15);
			proton.addEmitter(emitter);

			renderer = new Proton.CanvasRenderer(canvas);
			renderer.setStroke('#ff0000');
			renderer.onProtonUpdate = function () { };

			proton.addRenderer(renderer);

			window.onresize = function (e) {
				canvas.width = window.innerWidth;
				canvas.height = window.innerHeight;
				emitter.p.x = canvas.width / 2;
				emitter.p.y = canvas.height / 2;
			}
		}

		function mousedownHandler(e) {
			emitter.remove();
			context.clearRect(0, 0, canvas.width, canvas.height);
			setTimeout(function () { emitter.emit(15); }, 200);
		}

		function tick() {
			requestAnimationFrame(tick);

			stats.begin();
			emitter.rotation += .5;
			proton.update();
			stats.end();
		}
	</script>
</body>

</html>